<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>伪类测试</title>
		<style type="text/css">
			li:before {
				content: "↗";
			}
			
			a {
				position: relative;
				display: inline-block;
				outline: none;
				text-decoration: none;
				color: #000;
				font-size: 32px;
				padding: 5px 10px;
				margin-left: 60px;
			}
			
			/*a:after {
				content: "(" attr(href) ")";
				color: #FF0000;
			}*/
			
			a:hover::before,
			a:hover::after {
				position: absolute;
			}
			
			a:hover::before {
				content: "\5B";
				left: -20px;
			}
			
			a:hover::after {
				content: "\5D";
				right: -20px;
			}
			
			blockquote::before {
				content: open-quote;
				position: absolute;
				z-index: -1;
				color: #DDD;
				font-size: 120px;
				font-family: serif;
				font-weight: bolder;
			}
			.tree{
				margin-left: 30px;
			}
			.tree::after{
				content: "";
				position: relative;
				width: 20px;
				height: 30px;
				border-left: 1px solid #000000;
				left: 60px;
				top: 0px;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>first</li>
			<li>second</li>
			<li>third</li>
		</ul>
		<a href="border.html">路径</a>
		<blockquote>
			Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
		</blockquote>
		<div class="treeparent">
			<span class="tree">this a tree</span>
		</div>
	</body>

</html>